<template>
  <div class="drawer-menu-box" :class="{ show: isShow }" @touchmove.prevent @click="onMainClick" v-show="isShow">
    <div :class="['menu-main', isShow ? 'slideInUp' : 'fadeOut']" :style="{height: `${mainHeight}`}">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    mainHeight: {
      type: String,
      default: '4rem'
    },
    mainClickFn: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    onMainClick() {
      if (this.mainClickFn) {
        this.mainClickFn()
      } else {
        return
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-menu-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100vh;
  left: 0;
  display: flex;
  align-items: flex-end;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
  &.show {
    top: 0;
  }
  .menu-main {
    width: 7.5rem;
    background-color: #fff;
    border-radius: 0.2rem 0.2rem 0 0;
    text-align: center;
    position: relative;
  }
}
.slideInUp {
  animation-name: slideInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideInUp {
  0% {
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    transform: translateY(0);
  }
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
